<template>
	<view class="choose-seat-mian">
		<!-- 屏幕区域 -->
		<view class="screen">银幕</view>
		<!-- 座位区域 -->
		<view class="seat-box">
			<view class="seat-row flexR" v-for="(seatRow,seatRowIndex) in seatRegionData">
				<view v-for="(seatRank,seatRankIndex) in seatRow" :class="['seat-rank',
				seatRank==1?'state-1':'',
				seatRank[0]==2?'state-2':'',
				seatRank==3||seatRank[1]==3?'state-3':'',
				seatRank==4||seatRank[1]==4?'state-4':'']" @click="selectSeat(seatRank,seatRowIndex,seatRankIndex)"></view>
			</view>
		</view>
		<!-- 选座提示区域 -->
		<view class="seat-tip-box flexR">
			<view class="seat-tip flexR">
				<view class="seat-tip-rank state-1"></view>
				<view class="seat-tip-text">可选</view>
			</view>
			<view class="seat-tip flexR">
				<view class="seat-tip-rank state-2"></view>
				<view class="seat-tip-text">最佳观影位</view>
			</view>
			<view class="seat-tip flexR">
				<view class="seat-tip-rank state-3"></view>
				<view class="seat-tip-text">已售出</view>
			</view>
			<view class="seat-tip flexR">
				<view class="seat-tip-rank state-4"></view>
				<view class="seat-tip-text">已选</view>
			</view>
		</view>

		<!-- 电影选座信息 -->
		<view class="seat-info-box">
			<view class="seat-info flexR">
				<view class="seat-info-name">沙丘</view>
				<view class="seat-info-tag">
					<up-tag class="tag" text="IMAX" plain size="mini" type="warning"></up-tag>
					<up-tag class="tag" text="2D英语" plain size="mini" type="warning"></up-tag>
				</view>
			</view>
			<view class="seat-info-time">今天21:00-23:20</view>
			<view class="seat-info-row">
				<scroll-view class="seat-info-scroll-view" scroll-x style="width: 100vw;">
					<view class="seat-info-scroll-view-box flexR">
						<view class="row flexC" v-for="item in selectSeatInfo">
							<view class="row-info">{{item[0]+1}}排{{item[1]+1}}列</view>
							<view class="row-money">¥19.9</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="seat-but">
			<up-button type="primary" :plain="true" text="确认选座" shape="circle" color="#0aba93"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		func
	} from '../../uni_modules/uview-plus/libs/function/test'
	const selectSeatInfo = ref([])
	const seatRegionData = ref([
		[0, 1, 1, 1, 1, 1, 1, 1, 0],
		[0, 1, 1, 1, 1, 1, 1, 1, 0],
		[1, 1, [2, 1],
			[2, 1],
			[2, 1],
			[2, 1],
			[2, 1], 1, 1
		],
		[1, 1, [2, 1],
			[2, 1],
			[2, 1],
			[2, 3],
			[2, 3], 1, 1
		],
		[1, 1, [2, 1],
			[2, 1],
			[2, 1],
			[2, 1],
			[2, 1], 1, 1
		],
		[1, 3, [2, 1],
			[2, 1],
			[2, 3],
			[2, 1],
			[2, 3], 1, 1
		],
		[1, 1, 1, 1, 1, 1, 1, 1, 1],
		[1, 1, 1, 1, 1, 1, 1, 1, 1],
	])

	function selectSeat(seatRank, seatRowIndex, seatRankIndex) {
		const currentSeat = seatRegionData.value[seatRowIndex][seatRankIndex];
		if (seatRank == 3 || seatRank[1] == 3 || seatRank == 0 || seatRank[1] == 0) {
			uni.showToast({
				title: '当前座位不可选',
				icon: 'none'
			})
			return
		}
		const isArraySeat = Array.isArray(currentSeat);
		const baseStatus = isArraySeat ? currentSeat[0] : currentSeat;
		const newStatus = (baseStatus === 4 || (isArraySeat && currentSeat[1] === 4)) ? 1 : 4;
		seatRegionData.value[seatRowIndex][seatRankIndex] = isArraySeat ? [baseStatus, newStatus] : newStatus
		updataSelectedSeats(seatRowIndex, seatRankIndex, newStatus)
	}

	function updataSelectedSeats(seatRowIndex, seatRankIndex, newStatus) {
		const seatkey = `${seatRowIndex},${seatRankIndex}`;
		if (newStatus === 4) {
			if (!selectSeatInfo.value.some(seat => `${seat[0]},${seat[1]}` === seatkey)) {
				selectSeatInfo.value.push([seatRowIndex,seatRankIndex])
			}
		} else {
			selectSeatInfo.value = selectSeatInfo.value.filter(
				seat => `${seat[0]},${seat[1]}` !== seatkey)
		}
		console.log(selectSeatInfo.value)
	}
</script>

<style lang="scss" scoped>
	.choose-seat-mian {
		.screen {
			position: relative;
			width: 90%;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 auto 40rpx;
			background: linear-gradient(to bottom, #e0e0e0, #f8f8f8);
			border-radius: 50% 50% 0 0 / 20%;
			color: #666;
			font-size: 28rpx;
			text-align: center;
		}

		.seat-box {
			padding: 30rpx 20rpx 0 0rpx;

			.seat-row {
				justify-content: space-around;

				.seat-rank {
					width: 60rpx;
					height: 60rpx;
					border-radius: 15rpx;
					margin-bottom: 20rpx;
				}
			}

		}

		.seat-tip-box {
			justify-content: center;
			margin-top: 30rpx;

			.seat-tip {
				margin-right: 20rpx;
				align-items: center;

				.seat-tip-rank {
					width: 40rpx;
					height: 40rpx;
					border-radius: 15rpx;
					margin-right: 5rpx;
				}
			}
		}

		.seat-info-box {
			margin-top: 30rpx;
			padding: 20rpx;

			.seat-info {
				.seat-info-name {
					font-size: 40rpx;
					margin-right: 20rpx;
				}

				.seat-info-tag {
					.tag {
						margin-right: 20rpx;
					}
				}
			}

			.seat-info-time {
				margin: 15rpx 0;
				color: #aaaaaa;
				padding-bottom: 15rpx;
				border-bottom: 1rpx #eeeeee solid;
			}

			.seat-info-row {
				.seat-info-scroll-view {
					width: 100vw;
					overflow-x: auto;
					width: auto;
					white-space: nowrap;

					.seat-info-scroll-view-box {
						padding: 0 20rpx 0 0;

						.row {
							width: 120rpx;
							background: #ffffff;
							padding: 10rpx;
							align-items: center;
							justify-content: center;
							border-radius: 15rpx;
							margin-right: 20rpx;

							.row-info {
								margin-bottom: 10rpx;
								color: #0aba93;
							}
						}
					}
				}
			}
		}

		.seat-but {
			padding: 20rpx;
		}
	}

	// 座位可选样式
	.state-1 {
		border: 1rpx #aaaaaa solid;
		background: #ffffff;
	}

	// 座位最佳观影样式
	.state-2 {
		border: 1rpx #0aba93 solid;
		background: #ffffff;
	}

	// 座位已售样式
	.state-3 {
		border: 1rpx #ff7b00 solid;
		background: url('../../static/icon/selected.png') #ff7b00 center center no-repeat;
		background-size: 80% 80%;
	}

	// 座位选中样式
	.state-4 {
		border: 1rpx #0aba93 solid;
		background: url('../../static/icon/true.png') #0aba93 center center no-repeat;
		background-size: 80% 80%;
	}
</style>
<style>
	page {
		background: #f8f8f8;
	}
</style>